import { Button, NavBar } from 'antd-mobile'
import React from 'react'
import { useLocation, useNavigate } from 'react-router-dom'
import {useSelector} from 'react-redux'
import { useDispatch } from 'react-redux'
import { geSc } from '../../store/CityList'
import utils from '../../utils/utils'
const Deail = () => {
    const dispatch=useDispatch()
    const navigate=useNavigate()
    const { state } = useLocation()
    console.log(state);
    const cityList=useSelector((state)=>state.person.cityList)
    console.log(cityList);
    

    const back=()=>{
        navigate('/')
    }

    const getSc=(v)=>{
     dispatch(geSc(v))
    }

    const zhifu=async()=>{
        console.log("支付");
        const id=new Date().getTime()
        const resp=await utils.get("/pay",{params:{title:"车票",id:id,price:200}})
        window.open(resp.data.data)
    }
    return (
        <div>
            <NavBar onBack={back}>详情</NavBar>
            <div>
            <dl
                style={{
                    display: "flex",
                    padding: 10,
                    border: "1px solid #ccc",
                    justifyContent: 'space-around'
                }}>
                <dt>{state.start}-{state.end}</dt>
                <dd>
                    <div>是否高铁{state.isSpeed}</div>
                    <div>是否有票{state.isSeat}</div>
                </dd>
                <dd>
                    <div>商务座:{state.tick?.vip}</div>
                    <div>一等座:{state.tick?.firstTick}</div>
                    <div>二等座:{state.tick?.secondTick}</div>
                </dd>
            </dl>
            </div>
            

            <div>
              {
              cityList.map((v)=>{
                 return  <div key={v.id}
                 style={{
                    display: 'flex',
                    padding: 30,
                    justifyContent: 'space-between',
                 }}
                 >
                 <span>{v.name}</span>
                 <span>{v.code}</span>
                 <Button color='danger' size='mini' onClick={()=>getSc(v.id)}>删除</Button>
                 </div>
                })
            }
            </div>
            <Button block type='submit' color='primary' onClick={()=> zhifu()}>支付</Button>
        </div>
    )
}

export default Deail
